<!--
* description: 保修申请-提报-详情
* author: wangjuan
* createdDate:2020-11-12
-->
<template>
  <section class="editSetBelowAdd">
    <el-dialog
      v-dialogDrag
      :visible.sync="curPopupsVisible"
      :title="textMap[popupsState]"
      :append-to-body="true"
      width="70%"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-title">基本信息</div>
      <div class="filter-container filter-params">
        <el-button class="add" @click="save">保存</el-button>
        <el-button class="add" @click="submit">提交</el-button>
        <el-row ref="vailComponentList1" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">客户车辆信息</div>
      <div class="filter-container filter-params">
        <el-row :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents2.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :text="formField[comp.textField]"
            :disabled="comp.disabled"
            :o-fields="comp.oFields"
            :options="comp.options"
            :show-placeholder="comp.placeholder"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 24"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :data-to-object="comp.dataToObject"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">其他信息</div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="故障信息" name="first">
          <div class="filter-container filter-params">
            <el-row ref="vailComponentList3" :gutter="26">
              <component
                :is="comp.component"
                v-for="comp in tableComponents3.filter((o) => o.isMust === true )"
                :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
                :key="comp.compKey"
                :validrule="comp.validrule"
                :code-field="comp.codeField"
                :text-field="comp.textField"
                :popups-key="comp.compKey"
                :parent-fileds="comp.parentFileds"
                :code="formField[comp.codeField]"
                :disabled="comp.disabled"
                :o-fields="comp.oFields"
                :options="comp.options"
                :custom-obj="comp.customObj"
                :is-require="comp.isRequire"
                :is-mul="comp.isMul"
                :span="comp.span || 8"
                :label-name="comp.labelName"
                :lookuptype="comp.lookuptype"
                :date-options-type="comp.dateOptionsType"
                @changeCode="getComponentCode"
                @focusCode="getFocusCode"
              />
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane label="附件信息" name="second">
          <one-table-template
            ref="multipleTable1"
            :dynamic-buttons="dynamicTableButtons"
            :dynamic-table-cols="tableCols1"
            :dynamic-form-fields="formField"
            :dynamic-is-init-table="true"
            :dynamic-is-show-select="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="200"
            :is-show-pagination="false"
          />
        </el-tab-pane>

        <!-- 索赔项目 -->
        <el-tab-pane label="索赔工时" name="third">
          <one-table-template
            ref="multipleTable2"
            :dynamic-buttons="tableButtons1"
            :dynamic-form-fields="formField"
            :dynamic-table-cols="tableCols"
            :dynamic-is-init-table="true"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="200"
            :is-show-pagination="false"
            :callback-obj="callbackObj1"
          />
        </el-tab-pane>

        <!-- 索赔备件 -->
        <el-tab-pane label="索赔备件" name="fourth">
          <one-table-template
            ref="multipleTable3"
            :dynamic-buttons="tableButtons2"
            :dynamic-table-cols="tableCols2"
            :dynamic-form-fields="formField"
            :dynamic-is-init-table="true"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="200"
            :is-show-pagination="false"
            :callback-obj="callbackObj2"
          />
        </el-tab-pane>

        <!-- 索赔其他项目 -->
        <el-tab-pane label="索赔其他项目" name="fiveth">
          <one-table-template
            ref="multipleTable4"
            :dynamic-buttons="tableButtons3"
            :dynamic-table-cols="tableCols3"
            :dynamic-form-fields="formField"
            :dynamic-is-init-table="true"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="200"
            :is-show-pagination="false"
            :callback-obj="callbackObj3"
          />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 工时选择 -->
    <timeToChoose
      :key="editPopupsKey1"
      :dynamic-edit-row-data="timeEditRowData"
      :popups-visible-time="popupsVisibleTime"
      @close="close1"
      @returnTimeData="returnTimeData"
    />
    <!-- 备件选择 -->
    <sparePartsSelection
      :key="editPopupsKey2"
      :dynamic-edit-row-data="partEditRowData"
      :popups-visible-part="popupsVisiblePart"
      @close="close2"
      @returnPartData="returnPartData"
    />
    <!-- 其他选择 -->
    <otherInformation
      :key="editPopupsKey3"
      :dynamic-edit-row-data="otherEditRowData"
      :popups-visible-other="popupsVisibleOther"
      @close="close3"
      @returnOtherData="returnOtherData"
    />
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { vehiclePdiPriceInquirys } from '@/api/se/vehiclePdiPriceInquiry'
import Vue from 'vue'
export default {
  components: {
    dialogHeader: () => import('@/components/dialogHeader'),
    OneTableTemplate,
    otherInformation: () => import('./otherInformation.vue'),
    sparePartsSelection: () => import('./sparePartsSelection.vue'),
    timeToChoose: () => import('./timeToChoose.vue')
  },
  // 组件混入对象：{data[listQuery] methods[queryTable]}
  mixins: [oneTableWithViewTemplateMixins, formMixins],

  // // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ''], function() {
      next()
    })
  },
  props: {
    dynamicEditRowData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 弹出是否显示
    popupsVisible: { type: Boolean, default: false }
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      timeSum: 0,
      spartSum: 0,
      otherSum: 0,
      isExists: false,
      editPopupsKey1: 'editPopupsKey1',
      editPopupsKey2: 'editPopupsKey2',
      editPopupsKey3: 'editPopupsKey3',
      timeEditRowData: {},
      partEditRowData: {},
      otherEditRowData: {},
      popupsVisibleTime: false,
      popupsVisiblePart: false,
      popupsVisibleOther: false,

      timeDatas: [],
      partDatas: [],
      otherDatas: [],
      // 动态组件-按钮
      dynamicTableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          name: 'importTemplate',
          clickEvent: () => this.handFileListChange(),
          text: '附件上传',
          position: 'upload'
        }
      ],
      tableButtons1: [
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'add',
          clickEvent: (index) => this.timeAddd(index),
          text: '新增'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'cancel',
          clickEvent: (index) => this.deleteTime(index),
          text: '删除'
        }
      ],
      tableButtons2: [
        {
          compKey: 'btnKey3',
          size: 'small',
          name: 'add',
          clickEvent: (index) => this.partAdd(index),
          text: '新增'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'cancel',
          clickEvent: (index) => this.deletePart(index),
          text: '删除'
        }
      ],
      tableButtons3: [
        {
          compKey: 'btnKey4',
          size: 'small',
          name: 'add',
          clickEvent: (index) => this.otherAdd(index),
          text: '新增'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'cancel',
          clickEvent: (index) => this.deleteOther(index),
          text: '删除'
        }
      ],

      tableComponents: [],
      // 动态组件-查询条件
      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents1 &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents1.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents1
          : [
            {
              compKey: 'compKey1',
              labelName: '申请单号：',
              codeField: 'preAuthorCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey2',
              labelName: '门店编码：',
              codeField: 'dlrCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey3',
              labelName: '门店名称：',
              codeField: 'dlrFullName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey4',
              labelName: '状态：',
              codeField: 'sendStatus',
              component: () => import('@/components/org/commonSelect'),
              customObj: {
                api: vehiclePdiPriceInquirys.findClaimStutas
              },
              oFields: 'sendStatus,sendStatusName',
              isMul: false,
              disabled: true,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey5',
              labelName: '保修鉴定员：',
              codeField: 'sendMan',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey6',
              labelName: '联系电话：',
              codeField: 'sendManTel',
              component: () => import('@/components/org/commonInput'),
              validrule: { isPhone: true, maxlength: 11, noRequire: true },
              type: 'inputText',
              isRequire: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey7',
              labelName: '索赔分类：',
              codeField: 'guranteeType',
              textField: 'guranteeTypeName',
              customObj: {
                api: vehiclePdiPriceInquirys.findGuranteeType,
                selectType: '1',
                defOptionFields: ['guranteeType', 'guranteeTypeName']
              },
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isRequire: true,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey8',
              labelName: '预计工时费：',
              codeField: 'wiDueAmount',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey9',
              labelName: '预计备件费：',
              codeField: 'partDueFee',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey10',
              labelName: '其他费用：',
              codeField: 'sumOtherDueAmount',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey11',
              labelName: '合计金额：',
              codeField: 'feeTotal',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true,
              span: 6
            }
          ],

      // 动态组件-查询条件

      tableComponents2:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents2 &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents2.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents2
          : [
            {
              compKey: 'compKey1',
              labelName: 'VIN码：',
              codeField: 'vin',
              component: () => import('@/components/se/guaranteeVin'),
              type: 'inputText',
              isRequire: true,
              disabled: false,
              isMust: true,
              isMul: false,
              span: 6
            },
            {
              compKey: 'compKey2',
              labelName: '车牌号：',
              codeField: 'carLicense',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey3',
              labelName: '车型编码：',
              codeField: 'carConfigCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey4',
              labelName: '车型名称：',
              codeField: 'carConfigCN',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey5',
              labelName: '生产日期：',
              codeField: 'produceDate',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey6',
              labelName: '保修开始时间：',
              codeField: 'invoiceDate',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey7',
              labelName: '行驶里程：',
              codeField: 'mileage',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey8',
              labelName: '前电机号：',
              codeField: 'engineCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey9',
              labelName: '后电机号：',
              codeField: 'engineCode2',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey10',
              labelName: '变速器号：',
              codeField: 'ectCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey11',
              labelName: '增程器号：',
              codeField: 'boosterCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey12',
              labelName: '电池包编号：',
              codeField: 'batteryCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              disabled: true,
              span: 6
            },
            {
              compKey: 'compKey13',
              labelName: '购件日期：',
              codeField: 'payDate',
              component: () =>
                import('@/components/org/datePicker/datePicker.vue'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              disabled: true,
              span: 6
            },
            {
              compKey: 'compKey14',
              labelName: '购件里程：',
              codeField: 'payMileage',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              disabled: true,
              span: 6
            },
            {
              compKey: 'compKey15',
              labelName: '车主姓名：',
              codeField: 'custName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              disabled: true,
              span: 6
            },
            {
              compKey: 'compKey16',
              labelName: '车主电话：',
              codeField: 'phone',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              disabled: true,
              span: 6
            },
            {
              compKey: 'compKey17',
              labelName: '送修人：',
              codeField: 'repairMan',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey18',
              labelName: '送修人电话：',
              codeField: 'repairTel',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMul: false,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey19',
              labelName: '车辆用途：',
              codeField: 'buycaruseCode',
              component: () =>
                import('@/components/wms/dropdownList/dropdownList'),
              options: [],
              type: 'dropdownList',
              isMul: false,
              disabled: true,
              isMust: true,
              span: 6
            },
            {
              compKey: 'compKey20',
              labelName: '客户属性：',
              codeField: 'property',
              textField: 'propertyName',
              component: () =>
                import('@/components/wms/dropdownList/dropdownList'),
              options: [],
              type: 'dropdownList',
              isMul: false,
              disabled: true,
              isMust: true,
              span: 6
            }
          ],

      tableComponents3: [
        {
          compKey: 'compKey1',
          labelName: '故障类型：',
          codeField: 'custType',
          textField: 'custTypeName',
          customObj: {
            api: vehiclePdiPriceInquirys.findCustType,
            selectType: '1',
            defOptionFields: ['custType', 'custTypeName']
          },
          component: () => import('@/components/org/commonSelect'),
          isRequire: true,
          type: 'dropdownList',
          isMust: true,
          span: 6
        },
        {
          compKey: 'compKey2',
          labelName: '故障现象码：',
          codeField: 'csCode',
          textField: 'csCtName',
          customObj: {
            api: vehiclePdiPriceInquirys.findFaultPhenomenon,
            selectType: '1',
            defOptionFields: ['csCtCode', 'csCtName']
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'inputText',
          isMul: false,
          isMust: true,
          span: 6
        },
        {
          compKey: 'compKey3',
          labelName: '故障部位：',
          codeField: 'faultPartCode',
          textField: 'faultPartName',
          customObj: {
            api: vehiclePdiPriceInquirys.findFaultPartName,
            selectType: '1',
            defOptionFields: ['faultPartCode', 'faultPartName']
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true,
          span: 6
        },
        {
          compKey: 'compKey4',
          labelName: '故障描述：',
          codeField: 'custComplainCS',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isRequire: true,
          isMust: true,
          span: 24
        },
        {
          compKey: 'compKey5',
          labelName: '诊断过程：',
          codeField: 'detailCheckSynopsis',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isRequire: true,
          isMust: true,
          span: 24
        },
        {
          compKey: 'compKey6',
          labelName: '故障处理：',
          codeField: 'repairWay',
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isRequire: true,
          isMust: true,
          span: 24
        }
      ],

      // 附件信息
      tableCols1: [
        {
          prop: 'controlBtn',
          label: '操作',
          width: 100,
          fixed: true,
          isComponent: true,
          comps: [
            {
              compKey: 'Key0',
              labelName: '删除',
              component: () => import('@/components/org/linkButton'),
              clickEvent: (index) => this.delete(index)
            }
          ]
        },
        {
          prop: 'applyFilePathId',
          label: '附件ID',
          align: 'center',
          hidden: true
        },
        {
          prop: 'fileName',
          label: '附件名称',
          align: 'center'
        },
        {
          label: '附件路径',
          prop: 'attachmentFilePath',
          align: 'center'
        },
        {
          prop: 'fileRemark',
          label: '备注',
          align: 'center'
        }
      ],
      // 索赔工时
      tableCols: [
        {
          prop: 'wiId',
          label: '工时ID',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'wiCode',
          label: '工时编码',
          align: 'center'
        },
        {
          prop: 'wiName',
          label: '维修内容',
          align: 'center'
        },
        {
          prop: 'wiQTY',
          label: '工时数',
          align: 'center'
        },
        {
          prop: 'wiPrice',
          label: '工时单价',
          align: 'center'
        },
        {
          prop: 'wiTotal',
          label: '费用合计',
          align: 'center'
        },
        {
          prop: 'workClaimWiCoef',
          label: '索赔系数',
          align: 'center'
        },
        {
          prop: 'isMain',
          label: '是否主工时',
          align: 'center'
        }
      ],

      // 索赔备件
      tableCols2: [
        {
          prop: 'parPartId',
          label: '备件ID',
          align: 'center',
          hidden: true
        },
        {
          prop: 'partCode',
          label: '备件编码',
          align: 'center'
        },
        {
          prop: 'partName',
          label: '备件名称',
          align: 'center'
        },
        {
          prop: 'partQTY',
          label: '数量',
          align: 'center',
          isComponent: true,
          width: 170,
          comps: [
            {
              compKey: 'Key1',
              codeField: 'partQTY',
              component: () =>
                import('@/components/se/commonInput/numberInput'),
              isInput: true,
              align: 'center',
              dataToObject: {
                min: 0.1
              },
              change: (val, comType, row) => this.changeQty(val, comType, row),
              type: 'Number'
            }
          ]
        },
        {
          prop: 'partPrice',
          label: '单价',
          align: 'center'
        },
        {
          prop: 'partSum',
          label: '费用合计',
          align: 'center'
        },
        {
          prop: 'partClaimWiCoef',
          label: '索赔系数',
          align: 'center'
        },
        {
          prop: 'partIsMain',
          label: '是否主备件',
          align: 'center'
        }
      ],
      // 索赔其他项目
      tableCols3: [
        {
          prop: 'otherfeeId',
          label: '其他项目ID',
          align: 'center',
          hidden: true
        },
        {
          prop: 'otherFeeNO',
          label: '其他项目',
          align: 'center',
          hidden: true
        },
        {
          prop: 'otherFeeName',
          label: '其他项目',
          align: 'center'
        },
        {
          prop: 'otherFee',
          label: '费用',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'Key2',
              codeField: 'otherFee',
              component: () =>
                import('@/components/se/commonInput/priceNumInput'),
              isInput: true,
              dataToObject: {
                min: 0
              },
              change: (val, comType, row) => this.changeCost(val, comType, row),
              type: 'Number'
            }
          ]
        },
        {
          prop: 'otherRemark',
          label: '备注',
          align: 'center'
        }
      ],

      // 表单数据
      formField: this.$utils.getFormField(this,
        {
          sendManId: '',
          preAuthorCode: '',
          dlrFullName: '',
          dlrCode: '',
          sendStatus: '',
          sendMan: '',
          sendManTel: '',
          guranteeType: '',
          wiDueAmount: 0.00,
          partDueFee: 0.00,
          sumOtherDueAmount: 0.00,
          feeTotal: 0.00,

          vin: '',
          vinCode: '',
          carConfigCode: '',
          carSeriesCN: '',
          carConfigCN: '',
          produceDate: '',
          invoiceDate: '',
          mileage: '',
          engineCode: '',
          engineCode2: '',
          ectCode: '',
          boosterCode: '',
          batteryCode: '',
          payDate: '',
          payMileage: '',
          custName: '',
          phone: '',
          repairMan: '',
          repairTel: '',
          buycaruseCode: '',
          property: '',
          repairOrderCode: '',

          carBrandCode: '',
          carLicense: '',
          carSeriesCode: '',
          custType: '', // 故障类型
          custTypeName: '',
          pfpCode: '', // 故障件代码
          pfpName: '', //  故障件名称
          csCode: '', //  故障现象码
          csCtName: '',
          faultPartCode: '', //  故障部位
          faultPartName: '',
          remark: '', //  备注
          custComplainCS: '', // 故障描述
          detailCheckSynopsis: '', //  诊断过程
          repairWay: '', //  故障处理
          fujianInfo: [],
          claimProject: [],
          claimPart: [],
          claimOtherPart: []
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),

      // 标题
      textMap: {
        edit: '保修申请报告',
        add: '保修申请报告'
      },
      activeName: 'first', // tab栏默认项
      selectTime: [], // 工时
      selectPart: [], // 备件
      selectOther: [], // 其他

      callbackObj1: {
        onCheckSelectChange: (selection) => {
          this.selectTime = selection
        }
      },
      callbackObj2: {
        onCheckSelectChange: (selection) => {
          this.selectPart = selection
        }
      },
      callbackObj3: {
        onCheckSelectChange: (selection) => {
          this.selectOther = selection
        }
      }
    }
  },

  watch: {
    'formField.vin': {
      handler: function(val) {
        if (val) {
          this.queryCar(val)
        }
      }
    },
    popupsVisible: {
      handler(newVal) {
        if (newVal) {
          if (this.popupsState === 'edit') {
            this.tableComponents2[0].disabled = true
            this.$requestAPI({
              apiUrl: vehiclePdiPriceInquirys.findClaimDetails.APIUrl,
              variables: { preAuthorID: this.dynamicEditRowData.preAuthorID }
            }).then((response) => {
              const resDatas = response.rows[0]
              const attrs = ['vin', 'phone', 'guranteeType', 'custType', 'sendManTel',
                'csCode', 'faultPartCode', 'custComplainCS', 'detailCheckSynopsis', 'repairWay',
                'wiDueAmount', 'feeTotal', 'sumOtherDueAmount', 'partDueFee', 'repairMan', 'repairTel'
              ]
              attrs.forEach(attr => {
                if (Object.prototype.hasOwnProperty.call(this.formField, attr)) {
                  this.formField[attr] = resDatas[attr] === null ? '' : resDatas[attr]
                }
              })
              this.$refs['multipleTable1'].list = response.rows[0].fujianInfo
              this.$refs['multipleTable2'].list = response.rows[0].claimProject
              this.$refs['multipleTable3'].list = response.rows[0].claimPart
              this.$refs['multipleTable4'].list = response.rows[0].claimOtherPart
            })
          } else {
            this.tableComponents2[0].disabled = false
          }
        }
      }
    },

    // 计算工时费用
    timeDatas(val) {
      for (let i = 0; i < this.timeDatas.length; i++) {
        this.timeDatas[i].wiTotal = (Number((this.timeDatas[i].wiPrice * 100) / 100) * this.timeDatas[i].wiQTY).toFixed(2)
      }
      this.changeAmount()
    },
    // 备件费用
    partDatas(val) {
      for (let i = 0; i < this.partDatas.length; i++) {
        this.partDatas[i].partSum = (Number((this.partDatas[i].partPrice * 100) / 100) *
        this.partDatas[i].partQTY).toFixed(2)
      }
      this.changeAmount()
    },
    // 其他费用
    otherDatas(val) {
      this.changeAmount()
    }
  },

  created() {
    this.tableComponents = [...this.tableComponents1, ...this.tableComponents2, ...this.tableComponents3]
  },
  methods: {
    // 保存
    save() {
      const that = this
      this.$utils.validataMoth(this, 'validpopup')
      if (this.valid) {
        if (that.popupsState === 'add') {
          that.addSave()
          that.addSubmit()
        } else {
          that.editSave()
          that.editSubmit()
        }
      }
    },
    submit() {
      const that = this
      this.$utils.validataMoth(this, 'validpopup')
      if (this.valid) {
        if (that.popupsState === 'add') {
          that.addSubmit()
        } else {
          that.editSubmit()
        }
      }
    },
    // 新增提交
    addSubmit() {
      const addData = { ...this.formField }
      addData.sendStatus = 10
      addData.preAuthorID = this.dynamicEditRowData.preAuthorID
      addData.fujianInfo = this.$refs['multipleTable1'].list
      addData.claimProject = this.$refs['multipleTable2'].list
      addData.claimPart = this.$refs['multipleTable3'].list
      addData.claimOtherPart = this.$refs['multipleTable4'].list
      this.submitMethods(addData, vehiclePdiPriceInquirys.insertClaimDetail)
    },

    // 修改提交
    editSubmit() {
      const addData = { ...this.formField }
      addData.sendStatus = 10
      addData.preAuthorID = this.dynamicEditRowData.preAuthorID
      addData.fujianInfo = this.$refs['multipleTable1'].list
      addData.claimProject = this.$refs['multipleTable2'].list
      addData.claimPart = this.$refs['multipleTable3'].list
      addData.claimOtherPart = this.$refs['multipleTable4'].list
      this.submitMethods(addData, vehiclePdiPriceInquirys.saveOrSubmitClaimDetail)
    },

    // 新增保存
    addSave() {
      const addData = { ...this.formField }
      addData.sendStatus = 0
      addData.fujianInfo = this.$refs['multipleTable1'].list
      addData.claimProject = this.$refs['multipleTable2'].list
      addData.claimPart = this.$refs['multipleTable3'].list
      addData.claimOtherPart = this.$refs['multipleTable4'].list
      this.submitMethods(addData, vehiclePdiPriceInquirys.insertClaimDetail)
    },
    // 编辑保存
    editSave() {
      const addData = { ...this.formField }
      addData.sendStatus = 0
      addData.preAuthorID = this.dynamicEditRowData.preAuthorID
      addData.fujianInfo = this.$refs['multipleTable1'].list
      addData.claimProject = this.$refs['multipleTable2'].list
      addData.claimPart = this.$refs['multipleTable3'].list
      addData.claimOtherPart = this.$refs['multipleTable4'].list
      this.submitMethods(addData, vehiclePdiPriceInquirys.saveOrSubmitClaimDetail)
    },
    // 公共方法
    submitMethods(addData, ApiObj) {
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: ApiObj,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: addData

      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.result === '1') {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          this.closeEdit()
          this.$nextTick(() => {
            this.$parent.queryTable()
          })
        } else {
          this.$message({
            message: response.msg,
            type: 'warn',
            duration: 1000
          })
        }
      })
    },

    // 计算基本信息工时备件其他总金额
    changeAmount() {
      let timeTotal = 0
      let partTotal = 0
      let otherTotal = 0

      this.timeDatas = this.$refs['multipleTable2'].list
      this.partDatas = this.$refs['multipleTable3'].list
      this.otherDatas = this.$refs['multipleTable4'].list
      for (let i = 0; i < this.timeDatas.length; i++) {
        this.timeDatas[i].wiTotal = (Number((this.timeDatas[i].wiPrice * 100) / 100) * this.timeDatas[i].wiQTY).toFixed(2)
        timeTotal += (this.timeDatas[i].wiTotal * 100) / 100
      }
      for (let i = 0; i < this.partDatas.length; i++) {
        partTotal += (this.partDatas[i].partSum * 100) / 100
      }
      for (let i = 0; i < this.otherDatas.length; i++) {
        otherTotal += (this.otherDatas[i].otherFee * 100) / 100
      }
      this.formField.wiDueAmount = timeTotal.toFixed(2)
      this.formField.partDueFee = partTotal.toFixed(2)
      this.formField.sumOtherDueAmount = otherTotal.toFixed(2)
      this.formField.feeTotal = ((timeTotal * 100) / 100 + (partTotal * 100) / 100 + (otherTotal * 100) / 100).toFixed(2)
    },

    // VIN码带出信息
    queryCar(val) {
      this.$requestAPI({
        apiUrl: vehiclePdiPriceInquirys.findCarInfoByVIN.APIUrl,
        variables: { vin: val }
      }).then((res) => {
        if (res.result === '1') {
          const resDatas = res.rows[0]
          const attrs = ['carConfigCode', 'carConfigCN', 'carSeriesCode', 'carSeriesCN', 'engineCode',
            'engineCode2', 'invoiceDate', 'mileage', 'produceDate', 'property',
            'repairMan', 'repairOrderCode', 'batteryCode', 'boosterCode', 'carBrandCode',
            'carLicense', 'carSeriesCode', 'custName', 'ectCode', 'payDate',
            'payMileage', 'repairTel', 'buycaruseCode'
          ]
          attrs.forEach(attr => {
            if (Object.prototype.hasOwnProperty.call(this.formField, attr)) {
              this.formField[attr] = resDatas[attr] === null ? '' : resDatas[attr]
            }
          })
        }
      })
    },
    // 附件上传
    handFileListChange(file, fileList) {
      if (this.beforeAvatarUpload(file)) {
        this.handleChange(file)
      }
    },
    beforeAvatarUpload(file) {
      if (file.size > 50 * 1024 * 1024) {
        this.$message({
          message: '文件大小不能超过50M',
          type: 'warning'
        })
        return false
      }

      const fileType = file.name.substr(file.name.lastIndexOf('.') + 1)
      const fileTypes = ['doc', 'docx', 'xlsx', 'xls', 'pptx', 'ppt', 'txt', 'rar', 'zip', '7z', 'jpg', 'png', 'gif', 'ico', 'icon', 'jpeg', 'bmp', 'xml', 'pdf', 'apk', 'aip', 'mp3', 'mp4', 'html']
      if (fileTypes && fileTypes.length > 0) {
        for (var i = 0; i < fileTypes.length; i++) {
          if (fileTypes[i] === fileType) {
            this.isExists = true
            break
          } else {
            this.isExists = false
          }
        }
      }
      if (this.isExists === false) {
        this.$message({
          message: '不支持此格式文件！',
          type: 'warning'
        })
        return false
      }
    },
    beforeRemove(file) {},
    handleChange(param) {
      const loading = this.$loading({
        lock: true,
        text: '导入中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const that = this
      const url = '/mp/file/notice/upload.do'
      that.$requestUpload(url, param).then((response) => {
        if (response.result === '1') {
          loading.close()
          this.$message({
            message: '上传成功',
            type: 'success'
          })
          //  路径
          const attachmentFilePath = response.path[0][0].split('|')[1]
          // 文件名
          const fileName = response.path[0][0].split('|')[0]
          const dataParmas = { fileName, attachmentFilePath }
          that.$refs['multipleTable1'].list.push(dataParmas)
          this.formField.fujianInfo = that.$refs['multipleTable1'].list
        }
      })
    },

    // 删除附件
    delete(index) {
      this.$refs['multipleTable1'].list.splice(index, 1)
      this.$message.success('删除成功')
    },

    closeEdit() {
      this.$emit('close', false)
      this.$refs.multipleTable1.list = []
      this.$refs.multipleTable2.list = []
      this.$refs.multipleTable3.list = []
      this.$refs.multipleTable4.list = []
    },

    // 工时新增
    timeAddd() {
      this.popupsVisibleTime = true
      this.timeEditRowData = this.formField
    },
    // 删除
    deleteTime() {
      if (this.selectTime.length !== 0) {
        for (const i of this.selectTime) {
          this.$refs['multipleTable2'].list = this.$refs['multipleTable2'].list.filter(
            (item) => item !== i
          )
        }
        this.timeDatas = this.$refs['multipleTable2'].list
      } else {
        this.$message({
          message: '未勾选删除项！',
          duration: 1000
        })
      }
    },

    // 备件新增
    partAdd() {
      this.popupsVisiblePart = true
      this.partEditRowData = this.formField
    },
    // 备件删除
    deletePart() {
      if (this.selectPart.length !== 0) {
        for (const i of this.selectPart) {
          this.$refs['multipleTable3'].list = this.$refs['multipleTable3'].list.filter(
            (item) => item !== i
          )
        }
        this.partDatas = this.$refs['multipleTable3'].list
      } else {
        this.$message({
          message: '未勾选删除项！',
          duration: 1000
        })
      }
    },

    // 其他新增
    otherAdd() {
      this.popupsVisibleOther = true
    },
    // 其他删除
    deleteOther() {
      if (this.selectOther.length !== 0) {
        for (const i of this.selectOther) {
          this.$refs['multipleTable4'].list = this.$refs['multipleTable4'].list.filter(
            (item) => item !== i
          )
        }
        this.otherDatas = this.$refs['multipleTable4'].list
      } else {
        this.$message({
          message: '未勾选删除项！',
          duration: 1000
        })
      }
    },
    // 计算备件费用
    changeQty(val, comType, row) {
      row.partSum = Math.floor((Number(val) * Number(row.partPrice)) * 100) / 100

      this.spartSum = 0
      for (let i = 0; i < this.partDatas.length; i++) {
        this.spartSum += (this.partDatas[i].partSum * 100) / 100
      }
      this.$set(this.$refs['multipleTable3'].list, comType, row)

      this.formField.partDueFee = this.spartSum.toFixed(2)
      this.changeAmount()
    },

    // 计算其他费用
    changeCost(val, comType, row) {
      if (!val) {
        row.otherFee = 0
      }
      const regNum = /^(\+)?\d+(\.\d+)?$/
      if (!regNum.test(row.otherFee) && row.otherFee !== '') {
        this.$message('请输入正确的其他项目费用合计金额！')
        row.otherFee = 0
        this.tableCols3[1].comps[0].compKey =
          this.tableCols3[1].comps[0].compKey + this.$utils.generateId()
      }
      this.otherSum = 0
      for (let i = 0; i < this.otherDatas.length; i++) {
        this.otherSum += (this.otherDatas[i].otherFee * 100) / 100
      }
      this.formField.sumOtherDueAmount = this.otherSum.toFixed(2)
      this.changeAmount()
    },

    // 工时
    returnTimeData(returnData) {
      const timeTableData = this.$refs.multipleTable2.list
      for (let i = 0; i < timeTableData.length; i++) {
        if (timeTableData[i].wiCode === returnData.wiCode) {
          this.$message({
            message: '此条数据已添加！',
            duration: 1000
          })
          return
        }
      }
      returnData.wiName = returnData.repairContent
      returnData.wiQTY = returnData.saleWiQty
      this.$refs.multipleTable2.list.push(returnData)
      this.timeDatas = this.$refs.multipleTable2.list
    },
    // 备件
    returnPartData(returnData) {
      const partTableData = this.$refs.multipleTable3.list
      for (let i = 0; i < partTableData.length; i++) {
        if (partTableData[i].partCode === returnData.partNo) {
          this.$message({
            message: '此条数据已添加！',
            duration: 1000
          })
          return
        }
      }
      returnData.partQTY = returnData.accountQty
      if (returnData.partQTY === '' || returnData.partQTY === null || returnData.partQTY === 0) {
        returnData.partQTY = 0.1
      }
      returnData.partCode = returnData.partNo
      this.$refs.multipleTable3.list.push(returnData)
      this.partDatas = this.$refs.multipleTable3.list
    },

    // 其他
    returnOtherData(returnData) {
      const otherTableData = this.$refs.multipleTable4.list
      for (let i = 0; i < otherTableData.length; i++) {
        if (otherTableData[i].otherFeeNO === returnData.repairOtherCode) {
          this.$message({
            message: '此条数据已添加！',
            duration: 1000
          })
          return
        }
      }
      returnData.otherFeeNO = returnData.repairOtherCode
      returnData.otherFeeName = returnData.repairOtherName
      returnData.otherFee = returnData.otherTotalFee
      this.$refs.multipleTable4.list.push(returnData)
      this.otherDatas = this.$refs.multipleTable4.list
    },
    close1() {
      this.popupsVisibleTime = false
    },
    close2() {
      this.popupsVisiblePart = false
    },
    close3() {
      this.popupsVisibleOther = false
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-title {
  font-size: 18px;
  font-weight: bolder;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}

.btns-container {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
  .el-button {
    float: right;
  }
}
.add {
  margin-right: 19px;
  margin-bottom: 15px;
}
.mainten-table__line {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  background-color: #fff;
}
/deep/.el-input-number--small {
  width: 160px;
}
/deep/.el-input-number--small .el-input__inner {
  padding-right: 0;
}
/deep/.el-input-number .el-input__inner {
  padding-left: 0;
}
/deep/.el-table .el-input--small .el-input__inner {
  height: 26px;
}
</style>
